<div class="ui pointing secondary menu setting">
  <a class="item {s_tab.first?'active':''}" on-click="{this.active('first')}">成本维护</a>
  <a class="item {s_tab.second?'active':''}" on-click="{this.active('second')}">用户列表</a>
  <a class="item {s_tab.third?'active':''}" on-click="{this.active('third')}">统计任务</a>
</div>

<div class="ui bottom attached tab segment {s_tab.first?'active':''}">
  <h1 class="ui header">产品成本维护</h1>

  <a class="ui button large right floated" tabindex="0" on-click="{this.export('#products','成本.csv',$event)}"
     style="margin-bottom: 10px;">
    导出
  </a>

  <a class="ui button large right floated" tabindex="0" on-click="{newP=true}" style="margin-bottom: 10px;">
    新建
  </a>

  <table id="products" class="ui celled table">
    <thead>
    <tr>
      {#list product_items as item}
      <th>{item}</th>
      {/list}
      <th csv="false">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr csv="false" r-hide="!newP">
      <td>0</td>
      <td>
        <div class="ui input {newPNerror?'error':''}"><input r-model="newPName" value="" placeholder="名字"></div>
      </td>
      <td>
        <div class="ui input {newPBerror?'error':''}"><input r-model="newPBarCode" value="" placeholder="编码"></div>
      </td>
      <td>
        <div class="ui input {newPCerror?'error':''}"><input r-model="newPCost" value="" placeholder="整数,分"></div>
      </td>
      <td>
        <div class="ui input {newPDerror?'error':''}"><input r-model="newPDate" placeholder="yyyy-MM-dd HH:mm:ss"
                                                             value=""></div>
      </td>
      <td>
        <a href="javascript:void(0);" on-click="{this.new()}">保存</a>
        <a href="javascript:void(0);" on-click="{newP=false}">取消</a>
      </td>
    </tr>
    {#list products as product}

    <tr style="display: none">
      <td>{product_index+1}</td>
      <td>{product.name}</td>
      <td>{product.bar_code}</td>
      <td>{this.formatNum(product.cost,2)}</td>
      <td>{this.formatDate(product.date)}</td>
    </tr>

    <tr csv="false">
      <td>{product_index+1}</td>
      <td>
        <div r-hide="updateP[product_index]">{product.name}</div>
        <div r-hide="!updateP[product_index]" class="ui input"><input r-model="pName[product_index]"
                                                                      value="{product.name}"></div>
      </td>
      <td>
        <div r-hide="updateP[product_index]">{product.bar_code}</div>
        <div r-hide="!updateP[product_index]" class="ui input"><input r-model="pBarCode[product_index]"
                                                                      value="{product.bar_code}"></div>
      </td>
      <td>
        <div r-hide="updateP[product_index]">{this.formatNum(product.cost,2)}</div>
        <div r-hide="!updateP[product_index]" class="ui input {cerror[product_index]?'error':''}"><input
            r-model="pCost[product_index]" value="{product.cost}"></div>
      </td>
      <td>
        <div r-hide="updateP[product_index]">{this.formatDate(product.date)}</div>
        <div r-hide="!updateP[product_index]" class="ui input {derror[product_index]?'error':''}"><input
            r-model="pDate[product_index]" placeholder="yyyy-MM-dd HH:mm:ss" value="{this.formatDate(product.date)}">
        </div>
      </td>
      <td><a r-hide="updateP[product_index]" href="javascript:void(0);" on-click="{updateP[product_index]=true}">修改</a>
        <a r-hide="!updateP[product_index]" href="javascript:void(0);" on-click="{this.update(product_index)}">保存</a>
        <a r-hide="!updateP[product_index]" href="javascript:void(0);" on-click="{updateP[product_index]=false}">取消</a>
      </td>
    </tr>
    {/list}
    </tbody>
  </table>

</div>


<div class="ui bottom attached tab segment {s_tab.second?'active':''}">
  <h1 class="ui header">用户列表</h1>

  <a class="ui button large right floated" tabindex="0" on-click="{this.export('#users','用户.csv',$event)}"
     style="margin-bottom: 10px;">
    导出
  </a>
  <a class="ui button large right floated" tabindex="1" on-click="{this.beforeSaveUser()}"
     style="margin-bottom: 10px;">
    新建用户
  </a>

  <table id="users" class="ui celled table">
    <thead>
    <tr>
      {#list user_items as item}
      <th>{item}</th>
      {/list}
      <th csv="false">操作</th>
    </tr>
    </thead>
    <tbody>
    {#list users as user}
    <tr>
      <td>{user_index+1}</td>
      <td>{user.username}</td>
      <td>{user.full_name}</td>
      <td>{user.mobile}</td>
      <td>
        {#list user.permissions as permission}
        {permission.name},
        {/list}
      </td>
      <td>{this.formatDate(user.created_at)}</td>
      <td csv="false"><a on-click="{this.beforeUpdateUser(user.id)}">修改</a> <a on-click="{this.beforeDeleteUser(user.id,user.full_name)}">删除</a></td>
    </tr>
    {/list}
    </tbody>
  </table>


</div>

<div class="ui small modal updateUser">
  <i class="close icon"></i>

  <div class="header">
    修改用户信息
  </div>
  <div class="content">
    <form class="ui form">
      <div class="field">
        <label>登录名</label>

        <div class="field {updateUser.usernameerror?'error':''}">
          <input type="text" name="username" placeholder="登录名" r-model="updateUser.username">
        </div>
      </div>

      <div class="field">
        <label>姓名</label>

        <div class="two fields {updateUser.nameerror?'error':''}">
          <div class="field">
            <input type="text" name="first_name" placeholder="名" r-model="updateUser.first_name">
          </div>
          <div class="field">
            <input type="text" name="last_name" placeholder="姓" r-model="updateUser.last_name">
          </div>
        </div>
      </div>
      <div class="field">
        <label>电话</label>

        <div class="field">
          <input type="text" name="mobile" placeholder="电话" r-model="updateUser.mobile">
        </div>
      </div>
      <div class="field">
        <label>邮箱</label>

        <div class="field">
          <input type="text" name="email" placeholder="邮箱" r-model="updateUser.email">
        </div>
      </div>
      <div class="field {updateUser.passerror?'error':''}">
        <label>密码</label>

        <div class="two fields">
          <div class="field">
            <input type="password" name="new_password" placeholder="密码" r-model="updateUser.password">
          </div>
          <div class="field">
            <input type="password" name="new_password" placeholder="重复密码" r-model="updateUser.re_password">
          </div>
        </div>
      </div>
      {#if roles.length>0}

      <div class="field">
        <label>角色</label>

        <div class="field {updateUser.roleerror?'error':''}">
          {#list roles as role}
          <div class="ui checkbox">
            <input type="checkbox" id="role{role.id}" r-model="role.checked">
            <label for="role{role.id}">{role.name}</label>
          </div>
          {/list}
        </div>
      </div>
      {#else}

      <div class="field">
        <label>{updateUser.role.name}</label>

        <div class="field {updateUser.permissionerror?'error':''}">
          {#list permissions as permission}
          <div class="ui checkbox">
            <input type="checkbox" id="permission{permission.id}" r-model="permission.checked">
            <label for="permission{permission.id}">{permission.name}</label>
          </div>
          {/list}

        </div>
      </div>
      {/if}

    </form>
  </div>
  <div class="actions">
    <div class="ui black button cancel">
      取消
    </div>
    <div class="ui positive button" on-click="{this.updateOrSaveUser(updateUser)}">
      提交
    </div>
  </div>
</div>

<div class="ui small modal deleteUser">
  <i class="close icon"></i>

  <div class="header">
    删除用户
  </div>
  <div class="content">
    确认删除 "{updateUser.name}" ?
  </div>
  <div class="actions">
    <div class="ui black button cancel">
      取消
    </div>
    <div class="ui positive button" on-click="{this.deleteUser(updateUser)}">
      提交
    </div>
  </div>
</div>


<div class="ui bottom attached tab segment {s_tab.third?'active':''}">
  <h1 class="ui header">启动统计任务</h1>

  <div class="ui form" style="margin-bottom: 10px">
    <div class="grouped inline fields">
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="edb" r-model="edb">
          <label for="edb">是否从E店宝抓取以下数据：</label>
        </div>
      </div>
      <br/>
      <br/>

      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="order" r-model="order">
          <label for="order">订单统计</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="store" r-model="store">
          <label for="store">库存统计</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="gift" r-model="gift">
          <label for="gift">赠品统计</label>
        </div>
      </div>
    </div>
  </div>

  <app-datepicker state={@(this.$state)} config="{config}" searchState={sState}
                  on-select={this.job($event)}></app-datepicker>

  <div r-hide="!rep.success" class="ui positive message">
    <ul class="list">
      <li>任务启动成功，正在后台执行!</li>
    </ul>
  </div>
  <div r-hide="!rep.error" class="ui error message">
    <ul class="list">
      <li>任务启动失败!</li>
    </ul>
  </div>

</div>